<template>
	<view class="content">
		<view v-if="list.length !== 0" class="todo-header">
			<!-- 状态栏左侧 -->
			<view class="todo-header__left">
				<text class="active-text">{{activeText}}</text>
				<text>{{listData.length}}条</text>
			</view>
			<!-- 状态栏右侧 -->
			<view class="todo-header__right">
				<view class="todo-header__right-item" :class="{'active-tab': activeTab === 0}" @click="tab(0)">全部</view>
				<view class="todo-header__right-item" :class="{'active-tab': activeTab === 1}" @click="tab(1)">待办</view>
				<view class="todo-header__right-item" :class="{'active-tab': activeTab === 2}" @click="tab(2)">已完成</view>
			</view>
		</view>
		
		<view v-if="list.length == 0" class="default">
			<view class="image-default">
				<image src="../../static/default.png" mode="aspectFit"></image>
			</view>
			<view class="default-info">
				<!-- <view class="default-info__text">您还没有任何待办事项</view> -->
				<view class="default-info__text">点击下方+号创建一个吧</view>
			</view>
		</view>
		
		<view v-else class="todo-content">			
			<view class="todo-list" :class="{'todo--finish': item.checked}" v-for="(item, index) in listData" :key="index" @click="finish(item.id)">
				<view class="todo-list__checkbox">
					<view class="checkbox"></view>
				</view>
				<view class="todo-list__content">
					{{item.content}}
				</view>
			</view>
		</view>
		
		<view class="create-todo" @click="showInput">
			<view class="iconfont icon-add" :class="{'create-todo-active': textShow}"></view>
		</view>
		<view v-if="active" class="create-content" :class="{'create--show': textShow}">
			<view class="create-content-box">
				<view class="create-input">
					<input type="text" value="" placeholder="请输入你要创建的todo" v-model="inputContent">
				</view>
				<view class="create-button" @click="handleSubmit">
					创建
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'to-do',
				activeText: '全部',
				list: [],
				active: false,
				inputContent: '',
				activeTab: 0,
				textShow: false
			}
		},
		onLoad() {

		},
		computed: {
			listData () {
				let list = JSON.parse(JSON.stringify(this.list))
				let newList = []
				
				// 全部
				if(this.activeTab == 0){
					return list
				}
				
				// 待办
				if(this.activeTab == 1){
					list.forEach((item) => {
						if(! item.checked){
							newList.push(item)
						}
					})
					
					return newList					
				}
				
				// 已完成				
				if(this.activeTab == 2){
					list.forEach((item) => {
						if(item.checked){
							newList.push(item)
						}
					})
					
					return newList					
				}
			}
		},
		methods: {
			showInput () {
				if(this.active){
					this.close()
				}else{
					this.open()
				}
			},
			// 打开动画
			open () {
				this.active = true
				// 延时50ms显示动态添加的类
				this.$nextTick(() => {
					setTimeout(() => {
						// 动态添加类的显示
						this.textShow = true						
					}, 50)
				})
			},
			// 关闭动画
			close () {
				this.textShow = false
				// 延时350ms关闭动态添加的类
				this.$nextTick(() => {
					setTimeout(() => {
						// 动态添加类的隐藏
						this.active = false						
					}, 350)
				})
			},
			handleSubmit () {
				if (this.inputContent == '') {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					
					return false
				}
				
				this.list.unshift({
					id: 'id_' + new Date().getTime(),
					content: this.inputContent,
					checked: false
				})
				this.inputContent = ''
				this.close()
				
			},
			finish (id) {
				// 
				let index = this.list.findIndex((item) => item.id === id)
				this.list[index].checked = !this.list[index].checked
			},
			tab (index) {
				this.activeTab = index
				this.activeText = index == 0 ? '全部' : index == 1 ? '待办' : '已完成'
			}
		}
	}
</script>

<style>
	@import '../../common/icon.css';
	
	.todo-header{
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: 45px;
		padding: 0 15px;
		align-items: center;
		font-size: 12px;
		color: #333333;
		/* 不撑开 */
		box-sizing: border-box;
		box-shadow: -1px -1px 5px 0 rgba(0,0,0,0.1);
		background-color: #FFFFFF;
		z-index: 10;
	}
	
	.todo-header__left{
		width: 100%;
	}
	
	.active-text{
		font-size: 14px;
		color: #279ABF;
		padding-right: 10px;
	}
	
	.todo-header__right{
		flex-shrink: 0;
		display: flex;
	}
	
	.todo-header__right-item{
		padding: 0 5px;
	}
	
	.active-tab{
		color: #279ABF;
	}
	
	.todo-content{
		position: relative;
		padding-top: 45px;
		padding-bottom: 100px;
	}
	
	.todo-list{
		position: relative;
		display: flex;
		padding: 15px;
		margin: 15px;
		/* 字体 */
		color: #0c3854;
		font-size: 14px;
		/* 圆角 */
		border-radius: 10px;
		background: #cefbfd;
		/* 阴影 */
		box-shadow: -1px 1px 5px 1px rgba(0,0,0,0.1), -1px 2px 1px 0 rgba(255,255,255) inset;
		overflow: hidden;
	}
	
	.todo--finish .checkbox{
		position: relative;
		background: #eee;
	}
	
	/* 伪类实现checkbox的选中效果 */
	.todo--finish .checkbox:after{
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		border-radius: 50%;;
		background: #CFEBFD;
		box-shadow: 0 0 2px 0px rgba(0,0,0,0.2) inset;
	}
	
	.todo--finish .todo-list__content{
		color: #999999;
	}
	
	/* 伪类实现删除线的效果 */
	.todo--finish.todo-list:before{
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 40px;
		right: 10px;
		height: 2px;
		margin: auto 0;
		background: #bdcdd8;
	}
	
	/* 小竖线置灰 */
	.todo--finish.todo-list:after{
		background: #CCCCCC;
	}
	
	/* 伪类实现item左侧的小竖线 */
	.todo-list:after{
		position: absolute;
		content: '';
		top: 0;
		bottom: 0;
		left: 0;
		width: 5px;
		background: #91d1e8;
	}
	
	.todo-list__checkbox{
		padding-right: 15px;
	}
	
	.checkbox{
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border-radius: 10px;
		background: #FFFFFF;
		box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
	}
	
	.create-todo{		
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 20px;
		left: 0;
		right: 0;
		width: 50px;
		height: 50px;
		margin: 0 auto;
		border-radius: 50%;
		background: #deeff5;
		box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.1), -1px 1px 1px 0 rgba(255,255,255) inset;
		
	}
	
	.icon-add{
		font-size: 30px;
		color: #add8e6;
		transition: transform 0.3s;
	}
	
	.create-todo-active{
		transform: rotate(135deg);
	}
	
	.create-content{
		position: fixed;
		bottom: 95px;
		left: 20px;
		right: 20px;
		/* 以下动画效果 */
		transition: all 0.3s;
		opacity: 0;
		transform: scale(0) translateY(200%);
	}
	
	.create--show{
		opacity: 1;
		transform: scale(1) translateY(0);		
	}
	
	.create-content-box{
		display: flex;
		align-items: center;
		padding: 0 15px;
		padding-right: 0;
		border-radius: 50px;
		background: #DEEFF5;
		box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.1), -1px 1px 1px 0 rgba(255,255,255) inset;
		z-index: 2;
	}
	
	.create-content-box:after{
		content: '';
		position: absolute;
		right: 0;
		left: 0;
		bottom: -8px;
		margin: 0 auto;
		width: 20px;
		height: 20px;
		background: #DEEFF5;
		/* 旋转角度 */
		transform: rotate(45deg);
	}
	
	.create-content:after{
		content: '';
		position: absolute;
		right: 0;
		left: 0;
		bottom: -8px;
		margin: 0 auto;
		width: 20px;
		height: 20px;
		background: #DEEFF5;
		/* 旋转角度 */
		transform: rotate(45deg);
		box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.1);
		z-index: -1;
	}
	
	.create-input{
		width: 100%;
		padding-left: 15px;
		color: #add8e6;
	}
	
	.create-button{
		display: flex;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		align-items: center;
		/* 元素不希望被挤压 */
		flex-shrink: 0;
		width: 80px;
		height: 50px;
		border-radius: 50px;
		font-size: 16px;
		color: #88d4ec;
		/* 按钮的凸出效果 */
		box-shadow: -2px 0px 2px 1px rgba(0,0,0,0.1);
	}
	
	/* 缺省显示 */
	.default {
		padding-top: 100px;
	}
	
	.image-default {
		display: flex;
		justify-content: center;
		padding-left: 80px;
	}
	
	.image-default image {
		width: 100%;
	}
	
	.default-info {
		padding-top: 20px;
		font-size: 14px;
		color: #CCCCCC;
		text-align: center;
	}
</style>
